import React from 'react'

import { toFullPathContent } from '@/utils'

import type { ArticleItem } from '../../types'
import RichEditor from '../RichEditor'

interface ArticleDisplayProps {
  articles: ArticleItem[]
}

const ArticleDisplay: React.FC<ArticleDisplayProps> = ({ articles }) => {
  // 方法定义
  const renderArticles = () => {
    if (!articles || articles.length === 0) {
      return <div className="p-8 text-center text-gray-500">当前页面暂无内容</div>
    }

    return (
      <div className="space-y-4">
        {articles.map(article => (
          <div
            key={article.id}
            className="overflow-hidden rounded-lg bg-white shadow-md"
          >
            <div className="p-6">
              <h2 className="mb-4 text-2xl font-bold text-gray-800">{article.title}</h2>
              <div className="prose max-w-none">
                <RichEditor
                  value={toFullPathContent(article.content)}
                  readOnly={true}
                />
              </div>
            </div>
          </div>
        ))}
      </div>
    )
  }

  return renderArticles()
}

export default ArticleDisplay
